import React from 'react'
import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";
import {getCategoryFreq} from "../../panel/action";
import {messageModal} from "../../../common/date";


class Echarts1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            categoryFreq: {
                name: [],
                freq: [],
            }
        }
    }


    async componentDidMount() {
        getCategoryFreq().then(res => {
            if (res.code === 200) {
                this.setState({
                    categoryFreq: {
                        name: res.data.key1,
                        freq: res.data.val2
                    }
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    categoryChart() {
        const {categoryFreq} = this.state
        return {
            title: {
                text: '地区主题类型及对应访问频次分布',
                subtext: '可停靠获取信息，滚动缩放'
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                x: 60,
                y: 60,
                x2: 10,
                y2: 25,
                borderWidth: 2
            },
            xAxis: {
                data: categoryFreq.name,
                axisLabel: {
                    inside: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#999'
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: false,
                    itemStyle: {
                        color: {
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#83bff6'
                            }, {
                                offset: 0.6, color: '#188df0'
                            }, {
                                offset: 1, color: '#188df0'
                            }],
                            global: false
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            color: {
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#2378f7'
                                }, {
                                    offset: 0.6, color: '#8B4789'
                                }, {
                                    offset: 1, color: '#2378f7'
                                }],
                                global: false
                            }
                        }
                    },
                    data: categoryFreq.freq
                }
            ]
        }
    }

    render() {
        return (
            <div className={'bodycontent'}>
                <div className={'userdistanchart'} style={{marginTop:'10%',marginBottom:'12%'}}>
                    <ReactECharts
                        style={{height: "350px"}}
                        option={this.categoryChart()}/>
                </div>
            </div>
        )
    }
}

export default Echarts1
